.ipaddexchange-box{
    margin: 0px 12px;
    background-color: #fff;
    .add-exchange{
        position: absolute;
        height: calc(100% - 40px);
        width: calc(100% - 24px);
        background: #fff;
        overflow: auto;
        .exchange-title{
            text-align: center;
            color: #217AD9;
            font-size: 32px;
            margin: 64px 0 36px 0;
            font-weight: bold;
        }
        .edit-form{
            margin: 0 auto;
            width: 860px;  
            .edit-text{
                height: 42px;
                line-height: 42px;
                font-size: 18px;
                color: #505765;
                font-family: OPPOSans;
                font-weight: bold;
                margin: 40px 0 0 0;
                .el-button{
                    font-size: 16px;
                    float: right;
                    height: 42px;
                    margin: 0 10px;
                }
            }
            .rollsite-text{
                position: relative;
                padding: 24px 12px 12px;
                background-color: #FAFBFC;
                margin-bottom: 12px;
                .remove-section{
                    position: absolute;
                    top: 12px;
                    right: 12px;
                    height: 24px !important;
                    font-size: 24px !important;
                }
                .router-info{
                    display: flex;
                    height: 36px;
                    line-height: 36px;
                    color: #4E5766;
                    font-size: 14px;
                    span{
                        flex: 1;
                        flex-shrink: 0;
                    }
                    .el-button{
                        flex-shrink: 0;
                        font-size: 18px;
                    }
                    .go{
                        width: 37px;
                        height: 24px;
                        line-height: 24px;
                        margin: 6px 0 6px 10px;
                        font-size: 12px;
                        border-radius: 2px;
                    }
                    .search-input{
                        width: 200px;
                        margin-left: 10px;
                        input{
                            height: 24px;
                            background: transparent;
                            border: 1px solid #E6EBF0;
                            border-radius: 2px;
                        }
                    }
                }
                .inputwarn{
                    .el-input__inner{
                        border-color: #FF9D00;
                    }
                }
                .edit-table{
                    margin-top: 24px;
                    .el-table{
                        width: initial !important;
                        margin:0 !important;
                        border-radius: 4px;
                        .caret-wrapper {
                            position: absolute;
                            top: 3px;
                            height: 20px;
                            .sort-caret.ascending {
                                top: -3px;
                            }
                            .sort-caret.descending {
                                bottom: 0px;
                            }
                        }
                        thead{
                            tr:nth-of-type(1){
                                th{
                                    background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
                                }
                            }
                        }
                        th,td{
                            padding: 3px 0;
                            background-color: #fff;
                        }
                        td{
                            border-bottom:0;
                        }
                        .el-table__body-wrapper{
                            padding-bottom: 1px;
                            .el-table__empty-block{
                                border-bottom: 1px solid #e9e9e9;
                            }
                        }
                    }
                    .el-table::before{
                        background-color: #fff;
                    }
                }
                .el-form-item__label{
                    width: 230px !important;
                }
                .el-form-item__content{
                    margin-left: 230px !important;
                }
                .el-input{
                    width: 65%;
                }
                .el-button{
                    font-size: 16px;
                    height: 40px;
                    margin: 0 5px;
                    z-index: 100;
                    cursor: pointer;
                }
                .remove{
                    color: #FF9D00;
                }
                .remove:hover{
                    opacity: 0.85;
                }
            }
            .el-input__inner{
                color: #848C99;
                border: 0px;
                border-bottom: 1px solid #E6EBF0;
                background: transparent;
            }
            .is-error .el-input__inner{
                border-color:#FF9D00 !important;
            }
            .el-form-item{
                margin-bottom: 10px;  
            }
            .el-form-item__error{
                top:95%;
                color: #FF9D00;
                font-size: 14px;
            }
            .el-form-item__label:before{
                display: none;
                color: #fff;
            }
            .el-form-item__label{
                font-size: 16px;
                color: #848c99;
                padding-left: 10px;
            }
            .el-icon-star-on{
                position: relative;
            }
            .el-icon-star-on:before{
                content: '*';
                color: #FF9D00;
                top: -15px;
                left: -10px;
                position: absolute;
            }
            .star-not-active:before{
                color: #B8BFCC;
            }
            
            
        }
        
        .exchange-footer{
            margin: 30px 0;
            text-align: center;
            .ok-btn {
                width: 200px;
                font-size: 18px;
                height: 36px;
                line-height: 36px;
            }
        }
    }
    .add-site-dialog{
        //弹框居中
        .el-dialog {
           display: flex;
           flex-direction: column;
           margin: 0 !important;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           max-height: calc(100% - 30px);
           max-width: calc(100% - 30px);
       }

       .el-dialog__body {
           padding: 0 20px 36px 20px;
       }
       .el-dialog__header {
           // display: none;
       }
       .el-button{
           padding: 0;
           height: 36px;
           line-height: 36px;
       }
       .site-net-title{
           width: 196px;
           height: 21px;
           margin-bottom: 37px;
           font-size: 16px;
           font-family: OPPOSans;
           font-weight: bold;
           line-height: 20px;
           color: #505765;
       }
       .edit-form{
           margin:24px;
           .el-input__inner{
               border: 0px;
               border-bottom: 1px solid #E6EBF0;
               background: #fff;
           }
           .is-error .el-input__inner{
               border-color:#FF9D00 !important;
           }
           .el-form-item__error{
               top:95%;
               color: #FF9D00;
               font-size: 14px;
           }
       }
       .el-form-item{
           margin-bottom:14px;
           font-size: 14px;
           color: #848C99;
           
           .el-icon-star-on{
               position: relative;
           }
           .el-icon-star-on:before{
               content: '*';
               color: #FF9D00;
               top: -15px;
               left: -10px;
               position: absolute;
           }
           .star-not-active:before{
               color: #B8BFCC;
           }
           .el-form-item__label{
               font-size: 16px;
               color: #848c99;
           }
           .el-input__inner{
               padding: 0 0;
           }
           .el-form-item__content{
               .plus {
                   color: #217AD9;
                   font-weight: bold;
               }
           }
       }
       .inline{
           margin-bottom: 15px;
           .el-form-item__label{
               padding-bottom: 3px;
               margin-right: 10px;
           } 
           .el-form-item__content{
               display: inline-block;
               width: 77%;
               .edit-text{
                   height: 24px;
                   line-height: 24px;
                   color: #2D3642;
                   font-weight: bold;
               }
               .el-switch{
                   .el-switch__core {
                       width: 30px !important;
                       height: 16px;
                       line-height: 16px;
                       &::after{
                           width: 12px;
                           height: 12px;
                           margin-left: 0;
                       }
                   }
                   padding-bottom: 3px;
               }
               .el-switch.is-checked{
                   .el-switch__core {
                       &::after{
                           margin-left: -13px;
                       }
                   }
               }
           }
       }
       .el-form-item__label:before{
           display: none;
           color: #fff;
       }
       
       .dialog-footer{
           margin-top: 30px;
           text-align: center;
           .ok-btn {
               width: 130px;
               height: 24px;
               line-height: 22px;
               border-radius: 2px;
           }
       }
   }
   .site-toleave-dialog {

    //弹框居中
    .el-dialog {
            height: 240px; //弹框宽度
            display: flex;
            flex-direction: column;
            margin: 0 !important;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-height: calc(100% - 30px);
            max-width: calc(100% - 30px);
        }

        .el-dialog__body {
            padding: 24px;
        }

        .el-dialog__header {
            // display: none;
        }

        text-align: center;

        .line-text-one {
            font-size: 18px;
            color: #2D3642;
            margin-bottom: 24px
        }

        .line-text-two {
            font-size: 16px;
            color: #848C99;
            margin-bottom: 36px
        }

        .sure-btn {
            width: 180px;
            font-size: 18px
        }

    }
}